<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>限时秒杀</title>
    <style type="text/css">
        .box {
            margin: 0 auto;
            position: relative;
            background: url("../images/flash_sale.png");
            width: 702px;
            height: 378px;
        }

        .box div {
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            margin-left: 5px;
            line-height: 50px;
            text-align: center;
            color: red;
            position: relative;
            top: 260px;
            left: 305px;
        }
    </style>
</head>
<body>
<div class="box">
    <div id="d"></div><!--剩余天数-->
    <div id="h"></div><!--剩余小时-->
    <div id="m"></div><!--剩余分钟-->
    <div id="s"></div><!--剩余描述-->
</div>
</body>
<script type="text/javascript">
    /**
     * @Description: 
     * @author 朱志文
     * @date 2021/10/27 
    */
    /*设置秒杀结束时间*/
    var endTime = new Date('2021-10-31 23:59:59')
    var endSeconds = endTime.getTime();
    /*定义变量保存剩余时间*/
    var d = h = m = s = 0;
    /*设置定时器，实现限时秒杀效果*/
    var id = setInterval(seckill, 1000)

    function seckill() {
        var nowTime = new Date();/*获取当前时间*/
        /*获取时间差，单位为秒*/
        var remaining = parseInt((endSeconds - nowTime.getTime()) / 1000);
        if (remaining > 0) {
            /*计算剩余天数（除以60*60*24取整 获取剩余天数）*/
            d = parseInt(remaining / 86400)
            /*计算剩余小时（除以60*60取整 与24取模 获取剩余小时）*/
            h = parseInt((remaining / 3600) % 24)
            /*计算剩余分钟（除以60转化为分钟 与60取模 获取剩余分钟）*/
            m = parseInt((remaining / 60) % 60)
            /*计算剩余秒（与60取模，获取剩余秒数）*/
            s = parseInt(remaining % 60);
            /*统一利用两位数表示剩余的天、小时、分钟、秒*/
            d = d < 10 ? '0' + d : d;
            h = d < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
        } else {
            clearInterval(id)/*秒杀过期 取消定时器*/
            d = h = m = s = '00';
        }
        /*将剩余的天、小时、分钟、秒显示到指定网页中*/
        document.getElementById('d').innerHTML = d + '天'
        document.getElementById('h').innerHTML = h + '时'
        document.getElementById('m').innerHTML = m + '分'
        document.getElementById('s').innerHTML = s + '秒'
    }


</script>
</html>